import React, { ReactElement, useState } from 'react'
import style from './index.module.less'
import DepartmentList from './components/departmentList'
import PersonList from './components/personList'
import { DepartmentSchema } from '@src/components/schema/departmentSchema'
import { TreeData } from '@src/components/schema/tree'

function formatTree (data: DepartmentSchema[]): TreeData[] {
  return data.map(li => {
    const o = { title: li.name, value: li.id, children: formatTree(li.children) }
    return o
  })
}

function Main (): ReactElement {
  const [current, setCurrent] = useState<DepartmentSchema|null>(null)
  const [treeData, setTreeData] = useState<TreeData[]>([])
  return (
    <div className={style.container}>
      <div className={style.body}>
        <div className={style.left}>
          <DepartmentList treeData={treeData} value={current} onChange={v => setCurrent(v)} onInit={d => setTreeData(formatTree(d))} />
        </div>
        <div className={style.right}>
          <PersonList department={current} treeData={treeData} />
        </div>
      </div>
    </div>
  )
}

export default Main
